*{
    /*初始化，并设置均为borderbox*/
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

/*以下部分为logo区布局*/
.logo{
    width: 90%;
    margin:0 auto;
    height: 100px;
    background-color: antiquewhite;
}
#title{
    font:bolder 2em "微软雅黑";
    columns: black;
    line-height: 100px;
    text-align: center;
    text-shadow: 0 0 10px #000;
}
/*以下部分为使用浮动，创建一个菜单的实例*/

#menu{
    width: 90%;
    height: 100px;
    margin: 0 auto;
    background-color: aquamarine;
}

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li{
    float: left;
    width: 20%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 1.5em;
    font-family: "微软雅黑";
    background-color: aquamarine;
    
    transition-duration: 500ms;
}
#menu ul li:hover{
    background-color: antiquewhite;
}

#menu ul li a{
    text-decoration: none;
    color: black;
}

.clear{
    clear: both;
}
/*以下开始为flex布局各种实例*/
/*设置中间主区域*/
#main{
    margin:0 auto;
    width: 90%;
    background-color: yellow;    
}
/*设置主区域的子区域*/
#p1{
    width:100%;
    height: 500px;
    /*下面语句说明P1为flex盒子，默认横排列，目的是让左右两部分水平放置*/
    display: flex;
}
#p1 .left{
    width:70%;
    display:flex;
    margin:5% 0;
    justify-content: space-around;
    font-size: 30px;
    color: white;
}
#p1 .box1{
    width: 20%;
    height:100px;
    background-color:red;
}
#p1 .box2{
    width: 20%;
    height: 120px;
    background-color:green;
}
#p1 .box3{
    width: 20%;
    height:150px;
    background-color:blue;
}
#p1 .box4{
    width: 20%;
    height:110px;
    background-color:pink;
}
#p1 .right{
    width:30%;
    background-color: azure;    
}